<template>
    <div id="loginImgBox">
        <div id="loginBox">
            <p>欢迎登录</p>
            <ul>
                <li><b>账号</b></li>
                <li>
                    <el-input
                            class="inp"
                            placeholder="请输入账号"
                            v-model="loginData.phone"
                            clearable
                    ></el-input>
                </li>
                <li><b>密码</b></li>
                <li>
                    <el-input
                            class="inp"
                            placeholder="请输入密码"
                            v-model="loginData.password"
                            show-password
                    ></el-input>
                </li>
            </ul>
            <el-checkbox id="jizhu" v-model="checked">记住账号</el-checkbox>
            <el-button
                    :plain="true"
                    id="login"
                    type="primary"
                    @click="login"
                    @keyup.enter="login"
            >登录
            </el-button
            >
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loginData: {
                    phone: "",
                    password: "",
                },
                checked: false,
            };
        },
        methods: {
            login(name, pass) {
                if (name && pass) {
                    this.loginData = {
                        phone: name,
                        password: pass,
                    };
                } else {
                    this.$axios({
                        url: "/login",
                        method: "post",
                        data: this.loginData,
                    }).then((res) => {
                        console.log(res);
                        if (this.checked) {
                            localStorage.setItem("name", this.loginData.phone);
                            localStorage.setItem("pass", this.loginData.password);
                        } else {
                            localStorage.removeItem("name", this.loginData.phone);
                            localStorage.removeItem("pass", this.loginData.password);
                        }
                        sessionStorage.setItem("token", res.data.data.token);
                        if (res.data.code == 0) {
                            this.$message({
                                showClose: true,
                                message: "登录成功",
                                type: "success",
                            });
                            this.$router.push("/index");
                        }
                    }).catch((err) => {
                        this.$message.error('账号名或密码错误');
                        this.loginData.phone = "";
                        this.loginData.password = "";
                    });
                }
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
        },
        mounted() {
            if (localStorage.getItem("name") && localStorage.getItem("pass")) {
                this.login(localStorage.getItem("name"), localStorage.getItem("pass"));
            }
        },
    };
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #loginBox {
        width: 540px;
        height: 470px;
        border: rgb(242, 242, 246) solid 1px;
        border-radius: 5px;
        margin: 190px auto;
        background: white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    }

    body {
        height: 100%;
        width: 100%;
        background-color: rgb(242, 242, 246);
    }

    #loginImgBox {
        width: 100%;
        height: 1000px;
        overflow: hidden;
        background-image: url(../assets/login-img.jpg);
        background-size: cover;
        margin-top: -100px;
    }

    p {
        font-weight: bolder;
        font-size: 25px;
        text-align: center;
        margin: 50px auto;
    }

    b {
        font-size: 20px;
    }

    ul {
        list-style: none;
    }

    li {
        margin-bottom: 20px;
        margin-left: 70px;
    }

    .inp {
        width: 400px;
        height: 30px;
    }

    #jizhu {
        margin-left: 70px;
    }

    #login {
        width: 400px;
        height: 50px;
        margin-left: 70px;
        margin-top: 20px;
    }
</style>